<template>
  <div class="rightBodyContent" ref="applyHeight">
    <div class="rightBodyContent-in">
      <div class="apply-box">
        <div class="apply-box-left">
          <div class="student-list" v-show="studentList.length">
<!--            <div class="student-list">-->
<!--              <div class="search-list mb-10">-->
<!--                <div>-->
<!--                  <component-->
<!--                      v-bind:is="item.propertyType"-->
<!--                      :property.sync="item"-->
<!--                      v-for="item in getPower"-->
<!--                      @updateVal="updateVal"-->
<!--                  ></component>-->
<!--                </div>-->
<!--                <el-input placeholder="填写姓名" size="small" class="w-200 mr-10"></el-input>-->
<!--                <el-button plain size="small">搜索</el-button>-->
<!--              </div>-->
<!--            </div>-->
            <div class="list-box" ref="dialogBox">
              <div class="corner-student-list" v-for="item in studentList" :key="item.id"
                   :style="{width: div_box_width+'px'}" @click="getstudentId(item.id)">
                <div class="corner-student-list-in" :style="{width: img_width+'px'}">
                  <div class="corner-student-list-postion"
                       :style="{height: (img_height+2)+'px',width: (img_width+2)+'px'}">
                    <div class="corner-student-list-img">
                      <div class="student-img-box leaveUser"
                           :style="{background: 'url('+item.pic+')',backgroundRepeat: 'no-repeat',backgroundSize:'cover',backgroundPosition:'center', height: img_height+'px',width: img_width+'px'}"
                           :class="student_id==item.id?'showImg':''">
                      </div>
                    </div>
                    <div class="corner-student-list-evaluate"
                         :style="{height: (img_height+2)+'px',width: (img_width+2)+'px'}" v-if="student_id==item.id">
                      <div class="corner-list-icon">
                        <i class="iconfont iconqueren-zhengque"></i>
                      </div>
                    </div>
                  </div>
                  <div class="corner-student-list-name">
                    <p>{{ item.name }}</p>
                    <p>{{ item.classes ? item.classes.class_name : '--' }}</p>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="student-list" v-show="!studentList.length">
            <p class="noteData-tips">未找到相关学生信息</p>
          </div>
        </div>
        <div class="apply-box-right" :style="{height: heightBox+'px'}">
          <div class="apply-box-right-top-line">
            <div class="title-name">标题</div>
            <div class="yes-name">是</div>
            <div class="no-name">否</div>
          </div>
          <div class="apply-box-right-top" v-if="personalityList.length">
            <div v-for="(item,index) in personalityList" class="personality-list" :key="index">
              <div class="titleName">{{ index + 1 }}、{{ item.title }}</div>
              <!--              icondagou-->
              <div class="yes-box" @click="checkBox(index,1)">
                <span class="iconfont" :class="item.status==1?'icondagou':'iconxuanzhongyuandian'"></span>
              </div>
              <div class="yes-box" @click="checkBox(index,2)">
                <span class="iconfont" :class="item.status==2?'icondagou':'iconxuanzhongyuandian'"></span>
              </div>
            </div>
          </div>
          <div class="apply-box-right-top" v-else>
            <div class="apply-nonedata">暂无评价数据</div>
          </div>
          <div class="apply-box-right-bottom">
            <div class="apply-box-right-bottom-b">
              <el-button type="primary" size="small" @click="onSubmit">确认并提交</el-button>
              <!--              <el-button type="danger" plain size="mini" @click="clearList">一键清空</el-button>-->
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import logopng from '@/assets/imageAdmin/logo.jpg'

export default {
  name: "apply",
  components: {},
  data() {
    return {
      logopng: logopng,
      tabPosition: 'materiel',
      infoForm: {
        name: '',
        cate_id: '',
        reason: '',
        unit: '', // "单位",
        need_number: 1,
        price: '',
        pic: '',
        url: '',
        expect_time: '',
        remark: '',
        cate_son_id: ''
      },
      // 限制时间选择
      pickerOptions1: {
        disabledDate(time) {
          return time.getTime() < Date.now() - 8.64e7
        }
      },
      heightBox: 0,
      purchase: [],
      cateList: {},
      imgType: '',
      count: 0,
      goods_number: 0,
      itemOption: '',
      itemVisible: false,
      itemIndex: 0,
      picIndex: 0,
      excelFile: '',
      searchBox: {
        start_time: '',
        end_time: '',
        class_id: '',
        section_id: ''
      },
      studentList: [],
      div_box_width: 0,
      img_height: 0,
      img_width: 0,
      personalityList: [],
      student_id: 0,
      getPower: {
        'section_id': {
          name: 'section_id', // key名称
          default: '', // 默认值
          propertyType: "Select", // 组件名称
          placeholder: '年段', // 默认值
          valueText: '', // 值
          leve: 2,
          api: this.api.user_sectionindex, // 下拉框的请求接口
          keyName: 'section_name',// 调用的字段
          child: [
            {
              name: 'class_id',
              default: '',
              propertyType: "",
              placeholder: '班级',
              valueText: '',
              api: this.api.user_classesindex,
              keyName: 'class_name',
            }
          ]
        }
      }
    }
  },
  created() {
    // console.log('document.body.clientHeight:',document.body.clientHeight-(60+50+60))
    // console.log('document.body.clientHeight:',document.body.clientHeight-(60+50+60))
    // this.heightBox = document.body.clientHeight-(60+50+60)

    this.cornerStudentFn()
    this.getPersonalityFn()
  },
  mounted() {
    let n = this;
    this.$nextTick(() => {
      n.heightBox = document.body.clientHeight - (60 + 50 + 60 + 30)
    })
  },
  methods: {
    async onSubmit() {
      if(this.student_id){
        this.$message.error('选择需要点评的学生')
        return
      }
      // student_id list_id
      let list_id = []
      let status = 0;
      for (let item of this.personalityList) {
        if (item.status == 1) {
          list_id.push(item.id)
          status = 1
        }
      }
      if(!this.status){
        this.$message.error('点评内容至少一项')
        return
      }
      let data = await this.$post(this.api.acquisition.personality, {
        student_id: this.student_id,
        list_id: list_id.join(',')
      });
      if (!data.code) {
        this.student_id = 0
        for (let i in this.personalityList) {
          this.personalityList[i].status = 3
        }
        this.$message.success('提交成功！')
      } else {
        this.$message.success(data.msg)
      }
    },
    getChange() {
      this.cate_son_id = '';
    },
    groupTab(option) {
      if (option !== 'excel') {
        this.tabPosition = option
      }
    },
    getJson(option) {
      return JSON.parse(JSON.stringify(option))
    },
    async cornerStudentFn() {
      let data = await this.$fetch(this.api.admin_student_index, {
        page: 0
      });
      for (let i in data.list.data) {
        data.list.data[i].pic = JSON.parse(window.localStorage.getItem('FileIp')).http + data.list.data[i].pic
      }
      this.studentList = data.list.data;
      this.getStudentBoxWidth()
    },
    getStudentBoxWidth(){
      let n = this;
      this.$nextTick(() => {
        let list_num = 12
        n.boxHeight = n.$refs.dialogBox.offsetHeight;
        n.boxWidth = n.$refs.dialogBox.offsetWidth; // 计算单个宽度 一排 8 个
        if(n.boxWidth < 600){
          list_num = 7
        }else{
          if(n.boxWidth < 800){
            list_num = 9
          }
        }
        n.div_box_width = n.boxWidth / list_num; // 一寸照片 413*295
        console.log('尺寸：', n.boxHeight, n.boxWidth, n.div_box_width)
        // 单张的宽度 n.div_box_width*.9
        let a_width = n.div_box_width * .8;
        // img_height: 0,
        n.img_width = n.div_box_width * .8
        if (a_width < 295) {
          n.img_height = (a_width / 295) * 413
        }
        if (a_width === 295) {
          n.img_height = 413
        }
        if (a_width > 295) {
          n.img_height = (295 / a_width) * 413
        }
      })
    },
    // 更新值
    updateVal(option) {
      // console.log('变更数据收到的数据内容：', option)
      if (option.input) {
        this.searchBox[option['input'].name] = option['input'].valueText
      } else if (option.select) {
        for (let i in option.select) {
          if (option.select[i].name) {
            this.searchBox[option.select[i].name] = option.select[i].valueText
          } else {
            this.searchBox[option.select[i - 1].name] = option.select[i].valueText ? option.select[i].valueText : option.select[i - 1].valueText
          }
        }
      }
    },
    // 获取九型人格列表
    async getPersonalityFn() {
      let data = await this.$fetch(this.api.acquisition.setting.personality, {p: 0});
      console.log('data:', data)
      if (!data.code) {
        for (let item of data.list) {
          item.status = 3
        }
        this.personalityList = data.list
      }
    },
    checkBox(index, status) {
      this.personalityList[index].status = status;
    },
    getstudentId(id) {
      this.student_id = id;
    }
  }
}
</script>

<style scoped>
.corner-student-list {
  float: left;
  margin-bottom: 10px;
  margin-top: 10px;
}

.corner-student-list-in {
  cursor: pointer;
  margin: 0 auto;
}

.corner-student-list-in:hover .corner-student-list-postion {
  box-shadow: 0 0 4px #1b8de5;
}

.corner-student-list-in:hover .leaveUser {
  opacity: 1;
}

.corner-student-list-in .showImg {
  opacity: 1;
}

.corner-student-list-postion {
  position: relative;
  border: 1px solid #ddd;
}

.corner-student-list-name {
  text-align: center;
}

.corner-student-list-name p:first-child {
  padding-top: 5px;
  font-size: 16px;
  white-space: nowrap;
}

.corner-student-list-name p:last-child {
  font-size: 12px;
  color: #999;
}

.list-box {
  overflow: hidden;
}


.apply-box-left-from .el-form-item {
  margin-bottom: 10px;
}

.apply-box {
  display: flex;
}

.apply-box-left {
  flex: 1;
  margin-right: 20px;
}

.apply-box-right {
  width: 500px;
  border: 1px solid #999;
  border-radius: 5px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.apply-box-right-top {
  flex: 1;
  padding: 10px;
  overflow-y: auto;
}

.apply-box-right-bottom {
  background: #fff;
  height: 50px;
  display: flex;
  flex-direction: column;
  padding: 0 10px;
  border-top: 1px solid #999;
  align-items: center;
  justify-content: center;
}

.apply-box-right-top-line {
  height: 50px;
  display: flex;
  align-items: center;
  border-bottom: 1px solid #999;
  padding: 0 10px;
}

.apply-box-right-top-line .title-name {
  flex: 1;
  text-align: center;
}

.apply-box-right-top-line .yes-name {
  width: 50px;
  text-align: center;
}

.apply-box-right-top-line .no-name {
  width: 50px;
  text-align: center;
}

.personality-list {
  display: flex;
  padding: 10px 0;
  align-items: center;
  border-bottom: 1px solid #d8d8d8;
  cursor: pointer;
}

.personality-list:hover {
  background: #f4f4f4;
}

.personality-list .titleName {
  flex: 1;
  padding-right: 10px;
}

.personality-list .yes-box {
  width: 50px;
  text-align: center;
}

.personality-list .yes-box span {
  font-size: 22px;
  margin: 0;
}

.personality-list .icondagou {
  color: #008cf7;
}

.apply-box-right-bottom-l {
  height: 40px;
  text-align: right;
  line-height: 40px;
}

.apply-box-right-bottom-l span {
  font-size: 16px;
}

.apply-box-right-bottom-l span.price {
  color: #1b8de5;
  font-size: 20px;
  padding: 0 5px;
}

.apply-box-right-bottom-b {
  text-align: right;
}

.apply-box-right-list {
  margin-bottom: 10px;
  border-bottom: 1px dashed #333;
  padding-bottom: 15px;
  cursor: pointer;
}

.apply-box-right-list:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.apply-box-right-list-top {
  display: flex;
  margin-bottom: 5px;
}

.apply-box-right-list-top div {
  flex: 1;
}

.apply-box-right-list-top div span {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 230px;
  display: block;
}

.apply-box-right-list-box {
  display: flex;
  align-items: center;
  background: #fff;
  padding: 10px;
  position: relative;
}

.detele-box {
  position: absolute;
  right: -10px;
  top: -15px;
  font-size: 28px;
  color: red;
}

.detele-box:hover {
  text-decoration: underline;
}

.rightapply-box-right-list-box-img {
  display: flex;
  align-items: center;
  width: 230px;
}

.rightapply-box-right-list-box-img-in {
  width: 64px;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f4f4f4;
  margin-right: 10px;
}

.rightapply-box-right-list-box-img-in i {
  font-size: 40px;
  color: #aaa;
}

.rightapply-box-right-list-box-img-title {
  font-size: 16px;
}

.rightapply-box-right-list-box-img-title p:last-child {
  font-size: 14px;
  color: #999;
}

.rightapply-box-right-list-box-number {
  display: flex;
  align-items: center;
  width: 110px;
  margin: 0 10px;
}

.rightapply-box-right-list-box-number span {
  font-size: 22px;
  cursor: pointer;
}

.rightapply-box-right-list-box-number span:hover {
  text-decoration: underline;
}

.rightapply-box-right-list-box-price {
  font-size: 20px;
  flex: 1;
  text-align: center;
}

.rightapply-box-right-list-box-price span {
  font-size: 14px;
}

.rightapply-box-right-list-box-price:hover {
  text-decoration: underline;
}

.inline-input {
  width: 100%;
}

.apply-box-left-from {
  background: #f4f4f4;
  padding: 10px 20px;
}

.add-img .rightapply-box-right-list-box-img-in {
  border: 1px solid #ddd;
  background: #fff;
}

.apply-nonedata {
  text-align: center;
  color: #999;
  font-size: 20px;
  padding: 150px 0;
}

.leaveUser {
  opacity: .4;
}

.corner-student-list-evaluate {
  width: 100%;
  height: 100%;
  position: absolute;
  background: rgba(46, 106, 162, 0.6);
  color: #fff;
  top: 0;
}

.corner-list-icon {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.corner-student-list-evaluate i {
  font-size: 34px;
  margin: 0;
}
.noteData-tips{
  text-align: center;
  padding: 50px 0;
  color: #999;
  font-size: 18px;
}
</style>
